<template>
  <el-dialog v-el-drag-dialog class="dialog-pdts" :visible.sync="dialogactivityvisible" @open="openDialog" @close="closeDialog">
    <h3 slot="title">选择活动</h3>
    <p v-if="activities.length === 0" class="none">您还没有创建活动～</p>
    <!-- 筛选头部 -->
    <div v-else class="filter-box">
      <el-form ref="activityFilter" :inline="true" :model="activityFilter" class="filter-form">
        <el-form-item label="活动名称：">
          <el-input v-model="activityFilter.name" size="medium" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动开始时间：">
          <el-col>
            <el-date-picker v-model="activityFilter.date" type="date" placeholder="请选择时间" style="width: 100%;" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="toFilte">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="activities.length > 0" class="table-box">
      <table v-loading="loading" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>选择</th>
            <th>活动图片</th>
            <th>活动名称</th>
            <th>活动类型</th>
            <th>起止时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="ac in activities" :key="ac.id">
            <td><el-checkbox v-model="ac.selected" @change="checkItem(ac)" /></td>
            <td>
              <el-image style="width: 300px; height: 100px" :src="qnPath(ac.imageWeb)" fit="fit" />
            </td>
            <td>{{ ac.name }}</td>
            <td v-if="ac.type === '02200001'">折扣-{{ ac.disCount }}折</td>
            <td>
              <p>{{ new Date(ac.beginTime) | getDate }}至{{ new Date(ac.finishTime) | getDate }}</p>
              <p v-if="ac.finishTime - parseInt(new Date().getTime()) > 0" class="times">
                <template v-if="parseInt(new Date().getTime()) - ac.beginTime > 0">
                  <span>{{ (ac.finishTime - parseInt(new Date().getTime())) | formatDays }}</span>天
                  <span>{{ (ac.finishTime - parseInt(new Date().getTime())) | formatHours }}</span>时
                  <span>{{ (ac.finishTime - parseInt(new Date().getTime())) | formatMins }}</span>分
                </template>
                <template v-else>
                  <span>{{ (ac.finishTime - ac.beginTime) | formatDays }}</span>天
                  <span>{{ (ac.finishTime - ac.beginTime) | formatHours }}</span>时
                  <span>{{ (ac.finishTime - ac.beginTime) | formatMins }}</span>分
                </template>
              </p>
              <p v-else style="font-size: 14px; color:#f75757;margin-top: 10px;">活动过期</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 分页 -->
    <div v-if="activities.length > 0" class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper"
        :total="activityCount"
        :hide-on-single-page="true"
        :page-sizes="[5, 8, 10]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="activities.length > 0" class="btns">
      <el-button @click="goBack">返 回</el-button>
      <el-button type="primary" @click="OK">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getList } from '@/api/activity';
export default {
  name: 'DialogActivity',
  filters: {
    formatHours: value => { // 毫秒差转'Y时'
      return parseInt(Math.abs(value) / 1000 / 60 / 60) % 24;
    },
    formatMins: value => { // 毫秒差转'X天Y时Z分'
      return parseInt(Math.abs(value) / 1000 / 60) % 60;
    },
    formatDays: value => { // 毫秒差转'X天Y时Z分'
      return parseInt(Math.abs(value) / 1000 / 60 / 60 / 24);
    }
  },
  props: {
    dialogactivityvisible: {
      type: Boolean,
      default: false
    },
    selectedactivity: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        id: ''
      }
    },
    shopid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      activityFilter: {
        name: '',
        date: ''
      },
      selectedAC: null,
      activities: [],
      // 分页
      currentPage: 1,
      pageSize: 5,
      activityCount: 0
    };
  },
  watch: {
    checkedCount(value) {
      this.checkedAll = value === this.activities.length;
    },
    selectedactivity(value) {
      this.activities.map(ac => {
        ac.selected = value.id === ac.id;
      });
    }
  },
  methods: {
    openDialog() {
      this.currentPage = 1;
      this.getList();
    },
    getList(
      shopId = this.shopid,
      pageNo = this.currentPage,
      pageSize = this.pageSize,
      searchName = this.activityFilter.name,
      beginTime = this.activityFilter.date,
    ) {
      this.loading = true;
      new Promise((resolve, reject) => {
        getList({ shopId, pageNo, pageSize, searchName, beginTime }).then(res => {
          this.loading = false;
          const list = res.data.ativity;
          list.map(ac => {
            ac.selected = this.selectedactivity.id === ac.id;
          });
          this.activityCount = res.data.size;
          this.activities = list;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    toFilte() {
      this.currentPage = 1;
      this.getList();
    },
    checkItem(item) {
      this.activities.forEach(ac => {
        ac.selected = false;
      });
      item.selected = true;
      this.selectedAC = item;
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    goBack() {
      this.activityFilter = {
        name: '',
        date: ''
      };
      this.currentPage = 1;
      this.$emit('goBack');
    },
    OK() {
      this.$emit('ok', this.selectedAC);
    },
    closeDialog() {
      this.goBack();
    }
  }
};
</script>
<style lang="scss" scoped>
	.dialog-pdts{
		h3{
			margin: 0;
			color: $textColorDark;
			font-size: $fontSizeLg;
		}
		/deep/ .el-dialog__header{
			border-bottom: 1px solid $borderColor;
		}
		/deep/ .el-dialog__body{
			padding: 15px 20px;
		}
		/deep/ .el-dialog{
			width: 80vw;
			max-width: 1100px;
			max-height: 85vh;
			/* margin-top: 10vh !important; */
		}
		/deep/ .el-form-item{
			margin-bottom: 15px;
		}
		.table-box{
			overflow-y: scroll;
      max-height: 385px;
      min-height: 300px;
		}
		table{
			width: 100%;
			float: none;
			p{
				margin: 0
			}
			th,td{
				text-align: center;
				color: $textColorDark;
				font-size: $fontSizeBase;
				line-height: 1.58;
				border-bottom: 1px solid $disabledColor;
				border-right: 1px solid $disabledColor;
				&:first-child{
					border-left: 1px solid $disabledColor;
				}
				&:first-child{
					width: 6.8%;
				}
				&:nth-child(2){
					text-align: left;
          width: 340px;
        }
				&:nth-child(3){
					text-align: left;
					width: 20%;
				}
				&:nth-child(4){
					width: 13%;
				}
			}
			th{
				height: 40px;
				line-height: 40px;
				background-color: #F9FBFC;
				border-top: 1px solid $disabledColor;
				&:nth-child(2),&:nth-child(3){
					padding-left: 20px;
				}
			}
			td{
				background-color: #fff;
				padding: 10px 20px;
      }
      .times{
        font-size: $fontSizeBase;
        color: $textColorBase;
        span{
          color: #F75757;
          padding: 0 2px;
        }
      }
		}
  }
  .none{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    width: 100%;
  }
	.list-func{
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		.selected-num{
      margin: 0 20px;
      span{
        color: $mainColor
      }
    }
	}
.pagination{
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	border: 1px solid $borderColor;
	border-top: none;
}
.btns{
	padding-top: 15px;
	text-align: center;
}
</style>
